<template>
	<div class="app-container">
		<el-form
			:model="queryParams"
			ref="queryForm"
			:inline="true"
			v-show="showSearch"
			label-width="68px"
		>
			<el-form-item
				label="格式"
				prop="format"
			>
				<el-select
					v-model="queryParams.format"
					placeholder="请选择格式"
					clearable
					size="small"
				>
					<el-option
						v-for="dict in formatOptions"
						:key="dict.dictValue"
						:label="dict.dictLabel"
						:value="dict.dictValue"
					/>
				</el-select>
			</el-form-item>
      	<el-form-item
					label="类型"
					prop="infoType"
				>
					<el-select
						v-model="queryParams.infoType"
						placeholder="请选择类型"
					>
						<el-option
							v-for="dict in controlOptions"
							:key="dict.dictValue"
							:label="dict.dictLabel"
							:value="parseInt(dict.dictValue)"
						></el-option>
					</el-select>
				</el-form-item>
			<el-form-item
				label="位置"
				prop="position"
			>
				<el-input
					v-model="queryParams.position"
					placeholder="请输入位置"
					clearable
					size="small"
					@keyup.enter.native="handleQuery"
				/>
			</el-form-item>
			<el-form-item
				label="状态"
				prop="status"
			>
				<el-select
					v-model="queryParams.status"
					placeholder="请选择状态"
					clearable
					size="small"
				>
					<el-option
						v-for="dict in statusOptions"
						:key="dict.dictValue"
						:label="dict.dictLabel"
						:value="dict.dictValue"
					/>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button
					type="primary"
					icon="el-icon-search"
					size="mini"
					@click="handleQuery"
				>搜索</el-button>
				<el-button
					icon="el-icon-refresh"
					size="mini"
					@click="resetQuery"
				>重置</el-button>
			</el-form-item>
		</el-form>

		<el-row
			:gutter="10"
			class="mb8"
		>
			<el-col :span="1.5">
				<el-button
					type="primary"
					plain
					icon="el-icon-plus"
					size="mini"
					@click="handleAdd"
					v-hasPermi="['led:ledPublishManage:add']"
				>新增</el-button>
			</el-col>
			<el-col :span="1.5">
				<el-button
					type="success"
					plain
					icon="el-icon-edit"
					size="mini"
					:disabled="single"
					@click="handleUpdate"
					v-hasPermi="['led:ledPublishManage:edit']"
				>修改</el-button>
			</el-col>
			<el-col :span="1.5">
				<el-button
					type="danger"
					plain
					icon="el-icon-delete"
					size="mini"
					:disabled="multiple"
					@click="handleDelete"
					v-hasPermi="['led:ledPublishManage:remove']"
				>删除</el-button>
			</el-col>
			<el-col :span="1.5">
				<el-button
					type="warning"
					plain
					icon="el-icon-download"
					size="mini"
					@click="handleExport"
					v-hasPermi="['led:ledPublishManage:export']"
				>导出</el-button>
			</el-col>
			<right-toolbar
				:showSearch.sync="showSearch"
				@queryTable="getList"
			></right-toolbar>
		</el-row>

		<el-table
			v-loading="loading"
			:data="ledPublishManageList"
			@selection-change="handleSelectionChange"
		>
			<el-table-column
				type="selection"
				width="55"
				align="center"
			/>
			<el-table-column
				label="主键"
				align="center"
				prop="id"
			/>
			<el-table-column
				label="主题"
				align="center"
				prop="theme"
			/>
			<el-table-column
				label="展示内容"
				align="center"
				prop="showContent"
			/>
			<el-table-column
				label="格式"
				align="center"
				prop="format"
				:formatter="formatFormat"
			/>
      <el-table-column
				label="类型"
				align="center"
				prop="infoType"
				:formatter="infoTypeFormat"
			/>
			<el-table-column
				label="位置"
				align="center"
				prop="position"
			/>
			<el-table-column
				label="添加时间"
				align="center"
				prop="addTime"
				width="180"
			>
				<template slot-scope="scope">
					<span>{{ parseTime(scope.row.addTime, '{y}-{m}-{d} {h}:{m}:{s}') }}</span>
				</template>
			</el-table-column>
			<el-table-column
				label="状态"
				align="center"
				prop="status"
				:formatter="statusFormat"
			/>
			<el-table-column
				label="时长"
				align="center"
				prop="stopTime"
			>
				<template slot-scope="scope">
					{{scope.row.stopTime==0?"静":scope.row.stopTime}}
				</template>
			</el-table-column>
			<el-table-column
				label="操作"
				align="center"
				class-name="small-padding fixed-width"
			>
				<template slot-scope="scope">
					<el-button
						size="mini"
						type="text"
						icon="el-icon-edit"
						@click="handleUpdate(scope.row)"
						v-hasPermi="['led:ledPublishManage:edit']"
					>修改</el-button>
					<el-button
						size="mini"
						type="text"
						icon="el-icon-delete"
						@click="handleDelete(scope.row)"
						v-hasPermi="['led:ledPublishManage:remove']"
					>删除</el-button>
				</template>
			</el-table-column>
		</el-table>

		<pagination
			v-show="total>0"
			:total="total"
			:page.sync="queryParams.pageNum"
			:limit.sync="queryParams.pageSize"
			@pagination="getList"
		/>

		<!-- 添加或修改大屏发布记录对话框 -->
		<el-dialog
			:title="title"
			:visible.sync="open"
			width="500px"
			append-to-body
		>
			<el-form
				ref="form"
				:model="form"
				:rules="rules"
				label-width="80px"
			>
				<el-form-item
					label="主题"
					prop="theme"
				>
					<el-input
						v-model="form.theme"
						placeholder="请输入主题"
					/>
				</el-form-item>
				<el-form-item
					label="展示内容"
					prop="showContent"
				>
					<el-input
						v-model="form.showContent"
						type="textarea"
						placeholder="请输入内容"
					/>
				</el-form-item>
				<el-form-item
					label="格式"
					prop="format"
				>
					<el-select
						v-model="form.format"
						placeholder="请选择格式"
					>
						<el-option
							v-for="dict in formatOptions"
							:key="dict.dictValue"
							:label="dict.dictLabel"
							:value="parseInt(dict.dictValue)"
						></el-option>
					</el-select>
				</el-form-item>
        <el-form-item
					label="时长"
					v-if="form.format==1"
					prop="stopTime"
				>
					<el-input
						v-model="form.stopTime"
						placeholder="请输入时长"
					/>
				</el-form-item>
        <el-form-item
					label="类型"
					prop="infoType"
				>
					<el-select
						v-model="form.infoType"
						placeholder="请选择类型"
					>
						<el-option
							v-for="dict in controlOptions"
							:key="dict.dictValue"
							:label="dict.dictLabel"
							:value="parseInt(dict.dictValue)"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item
					label="位置"
					prop="position"
				>
					<el-input
						v-model="form.position"
						placeholder="请输入位置"
					/>
				</el-form-item>
				<el-form-item
					label="添加时间"
					prop="addTime"
				>
					<el-date-picker
						clearable
						size="small"
						v-model="form.addTime"
						type="date"
						value-format="yyyy-MM-dd"
						placeholder="选择添加时间"
					>
					</el-date-picker>
				</el-form-item>
				<el-form-item
					label="状态"
					prop="status"
				>
					<el-select
						v-model="form.status"
						placeholder="请选择状态"
					>
						<el-option
							v-for="dict in statusOptions"
							:key="dict.dictValue"
							:label="dict.dictLabel"
							:value="parseInt(dict.dictValue)"
						></el-option>
					</el-select>
				</el-form-item>
				
			</el-form>
			<div
				slot="footer"
				class="dialog-footer"
			>
				<el-button
					type="primary"
					@click="submitForm"
				>确 定</el-button>
				<el-button @click="cancel">取 消</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import {
		listLedPublishManage,
		getLedPublishManage,
		delLedPublishManage,
		addLedPublishManage,
		updateLedPublishManage,
	} from "@/api/led/ledPublishManage";

	export default {
		name: "LedPublishManage",
		components: {},
		data() {
			return {
				// 遮罩层
				loading: true,
				// 选中数组
				ids: [],
				// 非单个禁用
				single: true,
				// 非多个禁用
				multiple: true,
				// 显示搜索条件
				showSearch: true,
				// 总条数
				total: 0,
				// 大屏发布记录表格数据
				ledPublishManageList: [],
				// 弹出层标题
				title: "",
				// 是否显示弹出层
				open: false,
				// 格式字典
				formatOptions: [],
        	// 类型字典
				controlOptions: [],
				// 状态字典
				statusOptions: [],
				// 查询参数
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					format: null,
					position: null,
					status: null,
          infoType:null
				},
				// 表单参数
				form: {},
				// 表单校验
				rules: {
					theme: [
						{
							required: true,
							message: "主题不能为空",
							trigger: "blur",
						},
					],
					showContent: [
						{
							required: true,
							message: "展示内容不能为空",
							trigger: "blur",
						},
					],
					format: [
						{
							required: true,
							message: "格式不能为空",
							trigger: "change",
						},
					],
					position: [
						{
							required: true,
							message: "位置不能为空",
							trigger: "blur",
						},
					],
					status: [
						{
							required: true,
							message: "状态不能为空",
							trigger: "change",
						},
					],
					stopTime: [
						{
							required: true,
							message: "时长不能为空",
							trigger: "blur",
						},
					],
          	infoType:[
							{
							required: true,
							message: "类型不能为空",
							trigger: "change",
						},
					],
				},
			};
		},
		created() {
			this.getList();
      			this.getDicts("led_control_type").then((response) => {
				this.controlOptions = response.data;
			});
			this.getDicts("led_format_type").then((response) => {
				this.formatOptions = response.data;
			});
			this.getDicts("led_content_publish_status").then((response) => {
				this.statusOptions = response.data;
			});
		},
		methods: {
			/** 查询大屏发布记录列表 */
			getList() {
				this.loading = true;
				listLedPublishManage(this.queryParams).then((response) => {
					this.ledPublishManageList = response.rows;
					this.total = response.total;
					this.loading = false;
				});
			},
			// 格式字典翻译
			formatFormat(row, column) {
				return this.selectDictLabel(this.formatOptions, row.format);
			},
      	// 类型字典翻译
			infoTypeFormat(row, colum) {
				return this.selectDictLabel(this.controlOptions, row.infoType);
			},
			// 状态字典翻译
			statusFormat(row, column) {
				return this.selectDictLabel(this.statusOptions, row.status);
			},
			// 取消按钮
			cancel() {
				this.open = false;
				this.reset();
			},
			// 表单重置
			reset() {
				this.form = {
					id: null,
					theme: null,
					showContent: null,
					format: null,
					position: null,
					addTime: null,
					status: null,
					stopTime: null,
				};
				this.resetForm("form");
			},
			/** 搜索按钮操作 */
			handleQuery() {
				this.queryParams.pageNum = 1;
				this.getList();
			},
			/** 重置按钮操作 */
			resetQuery() {
				this.resetForm("queryForm");
				this.handleQuery();
			},
			// 多选框选中数据
			handleSelectionChange(selection) {
				this.ids = selection.map((item) => item.id);
				this.single = selection.length !== 1;
				this.multiple = !selection.length;
			},
			/** 新增按钮操作 */
			handleAdd() {
				this.reset();
				this.open = true;
				this.title = "添加大屏发布记录";
			},
			/** 修改按钮操作 */
			handleUpdate(row) {
				this.reset();
				const id = row.id || this.ids;
				getLedPublishManage(id).then((response) => {
					this.form = response.data;
					this.open = true;
					this.title = "修改大屏发布记录";
				});
			},
			/** 提交按钮 */
			submitForm() {
				this.$refs["form"].validate((valid) => {
					if (valid) {
						if (this.form.id != null) {
							updateLedPublishManage(this.form).then((response) => {
								this.msgSuccess("修改成功");
								this.open = false;
								this.getList();
							});
						} else {
							addLedPublishManage(this.form).then((response) => {
								this.msgSuccess("新增成功");
								this.open = false;
								this.getList();
							});
						}
					}
				});
			},
			/** 删除按钮操作 */
			handleDelete(row) {
				const ids = row.id || this.ids;
				this.$confirm(
					'是否确认删除大屏发布记录编号为"' + ids + '"的数据项?',
					"警告",
					{
						confirmButtonText: "确定",
						cancelButtonText: "取消",
						type: "warning",
					}
				)
					.then(function () {
						return delLedPublishManage(ids);
					})
					.then(() => {
						this.getList();
						this.msgSuccess("删除成功");
					});
			},
			/** 导出按钮操作 */
			handleExport() {
				this.download(
					"led/ledPublishManage/export",
					{
						...this.queryParams,
					},
					`led_ledPublishManage.xlsx`
				);
			},
		},
	};
</script>